<template>
  <div class="m-4">
    <el-cascader
        :options="cascaderOptions"
        :props="cascaderProps"
        collapse-tags
        collapse-tags-tooltip
        clearable
style="width: 350px"        @change="handleCascaderChange"
    />
  </div>
</template>

<script lang="ts">
import { onMounted, defineComponent, ref} from 'vue';

export default defineComponent({
  props: {
    selectData: {
      type: Object,
      required: true,
    },
  },
  setup(props, {emit}) {
    // const selectedValues = ref([]);
    const cascaderOptions = ref([]);
    const cascaderProps = ref({
      multiple: true,
      value: 'value',
      label: 'label',
      children: 'children',
    });

    onMounted(() => {
      cascaderOptions.value = Object.keys(props.selectData).map((faculty) => {
        return {
          value: faculty,
          label: faculty,
          // children: Object.keys(props.selectData[faculty]).map((major) => {
          //   const totalClasses = props.selectData[faculty][major];
          //   const classesArray = Array.from({length: totalClasses}, (_, index) => index + 1);
          //
          //   return {
          //     value: major,
          //     label: major,
          //     children: classesArray.map((classNumber) => {
          //       return {
          //         value: classNumber,
          //         label: `${classNumber}班`,
          //       };
          //     }),
          //   };
          // }),
        };
      });
    });

    const handleCascaderChange = (selected:any) => {
      emit('handleFilterChange', selected);
    };

    return {
      cascaderOptions,
      cascaderProps,
      handleCascaderChange,
    };
  },
});
</script>
